<template>
	<view class="details">
		<view class="questions-nav">
			<!-- <view class="questions-nav-title">{{info.questions.name}}</view> -->
			<view class="questions-nav-title">{{ info.time }}/秒</view>
			<view class="questions-nav-explain" @click="explainChange(1)">
				<image src="../../static/questions/shuo.png"></image>
				<view>说明</view>
			</view>
		</view>
		<All
			:info="info"
			:keys="keys"
			@qinfolaststepChange="qinfolaststepChange"
		></All>
		
		<Function 
			:schedule="info.schedule"
			:is_fyplay="is_fyplay"
			@functionChange ="functionChange"
			@laststepChage  = "laststepChage"
			@playChange = "playChange"
			
		></Function>
		<Explain :info="info.questions" v-if="is_explain == 1" @explainChange="explainChange"></Explain>
		<ad unit-id="adunit-e216b11c44862965" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
	</view>
</template>
<!--  -->
<script>
	import All  from "../../components/record/all.vue"
	import Function from  "../../components/record/function.vue"
	import Explain from "../../components/cell/explain.vue"
	
	export default {
		components:{
			Function,Explain,All
		},
		data() {
			return {
				id : '',
				info: {},
				keys  : [],
				index : null,
				index1 : null,
				key    :  0,
				is_fyplay : 0,
				Intervaltime : '',
				is_explain :0,
 			};
		},
		onLoad(e) {
			this.id  = e.id;
			this.getall();
		},
		methods: {
			explainChange(e){
				console.log(e);
				this.is_explain  = e;
			},
			functionChange(e){
				this.index = e.index;
				this.index1 = e.index1;
				this.keys   = {'index':e.index,'index1':e.index1,'is_laststep':0};
			},
			playChange(e){  //循环
				var  schedule  = this.info.schedule;
				var  body      = this.info.body;
				let  that   = this;
				if(e==0){
					clearTimeout(this.Intervaltime);
				}else if(e==1){
					this.key =  0;
					this.is_fyplay  = 1;
					this.Intervaltime = setInterval(() => {
						if(this.key+1 <= schedule.length){
							this.keys   = {'index':schedule[this.key].index,'index1':schedule[this.key].index1,'is_laststep':0};
							this.key ++;
						}else{
							that.is_fyplay  = 0;
							console.log('测试测试');
							clearTimeout(this.Intervaltime);
						}
						
					},1000)
				}else if(e==2){
					this.key =  0;
					this.keys   = {'index':schedule[this.key].index,'index1':schedule[this.key].index1,'is_laststep':2};
					
					clearTimeout(this.Intervaltime);
				}else if(e==3){
					this.key    = schedule.length-1;
					console.log(222);
					this.keys   = {'index':schedule[this.key].index,'index1':schedule[this.key].index1,'is_laststep':3};
					clearTimeout(this.Intervaltime);
				}
			},
			laststepChage(e){  //上一步
				let  that = this;
				var schedule   = that.info.schedule;
				
				var index = that.index ;
				var index1= that.index1;
				
				
				for(var k = 0 ; k < schedule.length; k++) {
					
					if(schedule[k]['index']  ==  index && schedule[k]['index1'] == index1){
						if(k == 0){
							that.index = '';
							that.index1 = '';
						}else{
							that.index  = schedule[k-1]['index'];
							that.index1  = schedule[k-1]['index1'];
						}
					}
				}
				that.keys   = {'index':that.index,'index1':that.index1,'is_laststep':1};
			},
			
			getall(){
				let that = this;
				that.$questions.getquestionsuserdetails({'id':that.id}).then(res=>{
					that.info  = res.data.info;
					uni.setNavigationBarTitle({
					    title: that.info.questions.name
					})
					var   body = that.info.body;
					for(var i=0; i <body.length; i++){
						for(var j=0; j< body[i].length;j++){
							body[i][j]['newuservalue']  =  '';
						}
					}
					that.info.body = body;
					
				})
			}
		}
	}
</script>

<style>
	.questions-nav {
		display: flex;
		padding-right: 16rpx;
		line-height: 120rpx;
		font-size: 40rpx;
		padding-left: 32rpx;
		text-align: left;
	}
	.questions-nav-title {
		flex: 1;
	}
	.questions-nav-right {
		margin: auto;
	}
	.questions-nav-explain {
		padding-left: 20rpx;
		display: flex;
		flex: 1;
		margin-left: auto;
		padding-right: 20rpx;
	}
	.questions-nav-explain > image {
		width: 40rpx;
		height: 40rpx;
		padding-top: 46rpx;
		display: block;
		margin-left: auto;
	}
	.questions-nav-explain > view {
		padding-left: 10rpx;
		color: #3eb8ff;
		font-size: 38rpx;
	}
</style>